<template>
  <div class="homepage-wrapper">
    <div class="top">标题</div>
    <div class="bigbox">
      <div class="leftbox"></div>
      <div class="rightbox">
        <div id="one" style="width: 100%; height: 100%"></div>
      </div>
      
    </div>
  </div>
</template>

<script>
import { getMyeachrts } from "@/utils/index";
export default {
  name: "OneDemo",
  data() {
    return {};
  },

  mounted() {
    var option;
    option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    getMyeachrts("one", option);
  },

  methods: {},
};
</script>
<style  lang="less" >
.homepage-wrapper {
  // padding: 0 10px 0 10px;
  .top {
    width: 100%;
    height: 300px;
    border: 1px solid skyblue;
    padding: 0 10px 0 10px;
  }
  .bigbox {
    padding: 10px;
    height:calc(100vh - 100px) ;
    display: flex;
    width: 100%;
    border: 1px solid red;
    .leftbox{
      width: 300px;
      border: 1px solid yellowgreen;
      margin-right: 10px;
    }
    .rightbox{
      border:  1px solid red;
      flex: 1;
    }
  }
}
</style>